<template>
    <a-modal title="流程详情" :visible="visible" :width="1400" @cancel="closeModal">
        <template slot="footer">
            <a-button key="submit" type="primary" @click="handleOk">
                关闭
            </a-button>
        </template>
        <a-card :bordered="false">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="24">

                        <a-col :md="6" :sm="12">
                            <a-form-item label="业务标题">
                                <a-input placeholder="请输入业务标题" v-model="queryParam.bpmBizTitle"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :md="7" :sm="12">
                            <a-form-item label="任务发起人">
                                <a-input-search placeholder="选择任务发起人" readOnly @search="handleSelect"
                                    v-model="queryParam.realname">
                                    <a-button slot="enterButton" icon="search">选择</a-button>
                                </a-input-search>
                            </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="8">
                            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
                                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                                <a-button type="primary" @click="searchReset" icon="reload"
                                    style="margin-left: 8px">重置</a-button>
                            </span>
                        </a-col>

                    </a-row>
                </a-form>
            </div>

            <!-- 操作按钮区域 -->

            <!-- table区域-begin -->
            <div>
                <a-table ref="table" :scroll="{ y: 500 }" bordered size="middle" rowKey="id" :columns="columns"
                    :dataSource="dataSource" :pagination="pagination" :loading="loading" @change="tableChange">
                    <a slot="action" slot-scope="text, record" @click="showHistory(record)">
                        历史
                    </a>
                    <!-- 字符串超长截取省略号显示-->
                    <div slot="bpmBizTitle" slot-scope="text, record">
                        <j-ellipsis :value="text" />
                    </div>
                    <!-- 耗时 -->
                    <div slot="consumeTime" slot-scope="text, record">
                        <span>{{ formatTime(text) }}</span>
                    </div>
                    <!-- 状态 -->
                    <span slot="endActivityId" slot-scope="text, record">
                        <span>{{ text === 'end' ? '已完成' : '处理中' }}</span>
                    </span>
                </a-table>
            </div>
            <!-- table区域-end -->

            <!-- 弹出框 -->
            <his-task-deal-modal ref="taskDealModal" :path="path" :formData="formData"></his-task-deal-modal>
            <select-single-user-modal ref="selectSingleUserModal" @selectFinished="selectUserOK"></select-single-user-modal>
        </a-card>
    </a-modal>
</template>
  
<script>
import HisTaskDealModal from "@/views/modules/bpm/task/HisTaskDealModal";
import JEllipsis from '@/components/jeecg/JEllipsis'
import { BpmNodeInfoMixin } from '@/views/modules/bpm/mixins/BpmNodeInfoMixin'
import SelectSingleUserModal from "@/views/modules/bpm/task/form/SelectSingleUserModal.vue";
import { getAction } from '@/api/manage';
import { BoardMixin } from './boardMixin'
export default {
    name: 'HisTaskList',
    mixins: [BpmNodeInfoMixin, BoardMixin],
    components: {
        HisTaskDealModal,
        JEllipsis,
        SelectSingleUserModal
    },
    props: {
        // 流程参数
        // process: {
        //     type: Object,
        //     default: () => { },
        // },
    },
    watch: {
    },
    data() {
        return {
            queryParam: {
                bpmBizTitle: "",
                username: "",
                realname: "",
            },
            dataSource: [],
            loading: false,
            columns: [
                {
                    title: '序号',
                    width: 60,
                    dataIndex: '',
                    key: 'rowIndex',
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1
                    }
                },
                {
                    title: '业务标题',
                    dataIndex: 'bpmBizTitle',
                    scopedSlots: { customRender: 'bpmBizTitle' },
                    align: 'center',
                }, {
                    title: '流程编号',
                    dataIndex: 'processDefinitionId',
                    align: 'center',
                }, {
                    title: '流程名称',
                    dataIndex: 'processDefinitionName',
                    align: 'center',
                }, {
                    title: '流程实例',
                    dataIndex: 'processInstanceId',
                    align: 'center',
                    width: 80
                }, {
                    title: '发起人',
                    dataIndex: 'startUserId_dictText',
                    align: 'center',
                    width: 100
                }, {
                    title: '开始时间',
                    dataIndex: 'startTime',
                    align: 'center',
                    width: 160
                }, {
                    title: '结束时间',
                    dataIndex: 'endTime',
                    align: 'center',
                    width: 160
                }, {
                    title: '耗时',
                    dataIndex: 'consumeTime',
                    scopedSlots: { customRender: 'consumeTime' },
                    align: 'center',
                },
                {
                    title: '状态',
                    dataIndex: 'endActivityId',
                    scopedSlots: { customRender: 'endActivityId' },
                    align: 'center',
                    width: 80
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    align: 'center',
                    width: 100
                }

            ],
            url: {
                list: "/api/erpmng/act/task/taskAllHistoryList",
            },
            path: "modules/bpm/task/form/FormLoading",
            formData: {},
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            visible: false,
            process: {},
            dataUsername: ''
        }
    },
    methods: {
        showModal(val) {
          console.log(val);
            this.process = { ...val }
            this.queryParam.username = val.username || ''
            this.dataUsername = val.username || ''
            this.visible = true
            this.dataSource = []
            this.searchQuery()
        },
        // 历史
        showHistory(record) {
            this.getHisProcessNodeInfo(record);
        },
        handleOk() {
            this.closeModal()
        },
        closeModal() {
            this.queryParam.bpmBizTitle = ''
            this.queryParam.username = ''
            this.queryParam.realname = ''
            this.pagination.current = 1
            this.pagination.pageSize = 10
            // this.$emit('update:visible', false)
            this.visible = false
        },
        handleSelect: function () {
            this.$refs.selectSingleUserModal.select();
        },
        selectUserOK: function (data) {
            this.$set(this.queryParam, 'username', data.username)
            this.queryParam.username = data.username;
            this.queryParam.realname = data.realname
        },
        searchReset() {
            this.queryParam.bpmBizTitle = ''
            this.queryParam.username = this.dataUsername
            this.queryParam.realname = ''
            this.pagination.current = 1
            this.pagination.pageSize = 10
            this.searchQuery()
        },
        // 查询
        searchQuery() {
            let { username, bpmBizTitle } = this.queryParam
            let { processKey, sortType, queryType, startDate, endDate,departId } = this.process
            let pageNo = this.pagination.current
            let pageSize = this.pagination.pageSize
            let queryScope = departId?'1':''
            this.loading = true
            getAction('api/erpmng/sys/bpm/report/board/bpmDetailList', { queryScope,departId,startDate, endDate, username, processKey, sortType, queryType, bpmBizTitle, pageNo, pageSize }).then(res => {
                this.loading = false
                if (res.result) {
                    this.dataSource = res.result.records || []
                    this.pagination.total = res.result.total
                    this.$forceUpdate();
                }
            })
        },
        tableChange(val) {
            this.pagination = val
            this.searchQuery()
        }
    }

}
</script>
<style scoped>
.ant-card-body {
    margin-bottom: 18px;
}

.table-operator button {
    margin-bottom: 18px;
    margin-right: 5px;
}

.anty-row-operator button {
    margin: 0 5px
}

.ant-btn-danger {
    background-color: #ffffff
}

.ant-modal-cust-warp {
    height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
}

.anty-img-wrap {
    height: 25px;
    position: relative;
}

.anty-img-wrap>img {
    max-height: 100%;
}
</style>